<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Badge</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>
  <h4>1. Badge position</h4>
  <ion-item>
    <ion-badge item-left>1k</ion-badge>
    item-left
  </ion-item>
  <ion-item>
    item-right
    <ion-badge item-right>2k</ion-badge>
  </ion-item>

  <br>

  <h4>2. Badge color</h4>
  <ion-item>
    Default/Primary
    <ion-badge color="primary" item-right>#387ef5</ion-badge>
  </ion-item>
  <ion-item>
    Secondary
    <ion-badge color="secondary" item-right>#32db64</ion-badge>
  </ion-item>
  <ion-item>
    Danger
    <ion-badge color="danger" item-right>#f53d3d</ion-badge>
  </ion-item>
  <ion-item>
    Light
    <ion-badge color="light" item-right>#f4f4f4</ion-badge>
  </ion-item>
  <ion-item>
    Dark
    <ion-badge color="dark" item-right>#222</ion-badge>
  </ion-item>
  <ion-item>
    favorite
    <ion-badge color="favorite" item-right>#69BB7B</ion-badge>
  </ion-item>

</ion-content>
